<template>
    <div class="content">
        <el-row class="material-group" :gutter="20">
            <el-col :span="20">
                <el-tabs v-model="activeName" class="material-group-tabs" @tab-click="handleClickMaterialName">
                    <el-tab-pane v-for="materialGroup in materialGroups" 
                    :label="materialGroup.materialGroupName"
                    :key="materialGroup.id"
                    :name="materialGroup.id"
                    ></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col class="material-group-operator" :span="2">
                <el-button type="primary">新增材质分组</el-button>
            </el-col>
            <el-col class="material-group-operator" :span="2">
                <el-button type="danger">删除材质分组</el-button>
            </el-col>
        </el-row>
        <div class="material-add">
            <el-button type="primary">新增材质</el-button>
        </div>
        <div class="material-list">
            {{ activeMaterials[0].materialName }}
        </div>
    </div>
</template>
<script setup lang="ts" name="Material">
import { ref,computed } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {materialGroupsType,materialType} from '../../../api/ck/types'
const materialGroups = ref<materialGroupsType[]>(
    [
        {id:1,materialGroupName:'白卡纸'},
        {id:2,materialGroupName:'牛皮纸'},
        {id:3,materialGroupName:'铜版纸'}
    ]
);
const activeName = ref<number|string|undefined>(1);
const materials = ref<materialType[]>(
    [
        {id:1, group_id:1, materialName:"白卡350"},
        {id:2, group_id:2, materialName:"牛皮"}
    ]
);

const activeMaterials = computed(()=>{
    return materials.value.filter((item)=>item.group_id == activeName.value)
});

const handleClickMaterialName = (tab: TabsPaneContext) => {
    console.log(tab.props);
    activeName.value = tab?.props.name;
};

</script>
<style scoped lang="scss"> 
    .material-group{
        border: solid 1px red;
        .material-group-operator{
            display:flex;
            align-items: center;
        }
    }
</style>